<template>
  <view class="law-container">

    <view class="example">
      <u-form labelPosition="left" :model="form" :rules="rules" ref="form">
        <uni-section class="mb-10" title="请补充相关材料。以便为您提供更好地咨询或服务" type="line" titleFontSize="10px"></uni-section>
        <u-form-item  prop="supplement">
          <u-textarea v-model="form.supplement" placeholder="请输入相关材料" count maxlength="500" height="120"></u-textarea>
        </u-form-item>
        <uni-section class="mb-10" title="附件上传" type="line" titleFontSize="10px"></uni-section>

        <u-form-item  prop="supplement">
          <u-upload
              :fileList="fileList"
              @afterRead="afterRead"
              @delete="deletePic"
              multiple
              :maxCount="10"
          ></u-upload>
        </u-form-item>
      </u-form>
      <view class="bottom">
        <u-button color="#e43d33" @click="submit">立即提交</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import Upload from "@/static/const/upload.js";
import {isEmptyArray} from "@/utils/common.js";
import config from "@/config";

export default {
  data() {
    return {
      imageURL: "/static/images/mine/txbg.png",
      form: {
        supplement: "",
        file:"",
        orderId:"",
      },
      rules: {
        supplement: {
          type: "string",
          required: false,
          message: "姓名为必填项",
          trigger: ["blur", "change"],
        },
      },
      fileList: [],
    };
  },
  onLoad(params) {
    this.form.orderId = params.id;
  },
  onReady() {
    //onReady 为uni-app支持的生命周期之一
    this.$nextTick(() => {
      this.$refs.form.setRules(this.rules);
    });
  },
  methods: {
    // 删除图片
    deletePic(event) {
      this.fileList.splice(event.index, 1);
    },
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.fileList.length
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url)
        let item = this.fileList[fileListLen]
        this.fileList.splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }))
        fileListLen++
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url:  Upload.uploadUrl,
          filePath: url,
          name: 'file',
          header: Upload.headers,
          success: (res) => {
            console.log(res)
            if(res.statusCode === 200){
              setTimeout(() => {
                const result = JSON.parse(res.data)
                const url=config.baseUrl+ result.fileName
                resolve(url)
              }, 1000)
              }

          }
        });
      })
    },

    submit() {
      console.log(this.fileList)
      //将fileList中的url提取出来，放到form中，用逗号隔开
      this.form.file= this.fileList.map(item => item.url).join(',')
      this.$refs.form
          .validate()
          .then((res) => {
            this.$store
                .dispatch("supplementData", this.form)
                .then((res) => {
                  uni.showToast({
                    title: "提交成功",
                    icon: "none",
                  });
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1000);
                })
                .catch((err) => {
                  uni.showToast({
                    title: err.msg,
                    icon: "none",
                  });
                });
          })
          .catch((errors) => {
            uni.$u.toast("请填写完整信息");
          });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f5f7fa;
}

.law-container {
  display: flex;
  flex-direction: column;
  height: 100%;


  .example {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    position: absolute;
    //left: 2%;
    //top: 5rem;
    padding: 0.5rem;
    padding-left: 1rem;

    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;

      text {
        color: #999;
      }
    }

    .flex-column {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      text-align: center;

      text {
        color: #999;
      }
    }
  }

  .marginTop {
    margin-top: 0.5rem;

    .radio {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      border: 1px solid #999;
    }

    .radio-checked {
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e43d33;
    }
  }

  .bottom {
    margin-top: 1rem;
  }
}
</style>
